<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="./bilibili/font/iconfont.js"></script>
    <title>三级项目首页</title>
    <style>
        .icon {
            width: 1em;
            height: 1em;
            vertical-align: -0.15em;
            fill: currentColor;
            overflow: hidden;
        }

        html {
            font-size: 62.5%;
        }

        body,
        h1,
        h2,
        h3,
        h4,
        h5,
        h6,
        p {
            padding: 0;
            margin: 0;
        }

        ul {
            padding: 0;
            margin: 0;
            list-style: none;
        }

        a {
            text-decoration: none;
            color: #000;
        }

        img {
            border: none;
            display: block;
        }

        #weclome {
            font-size: 5rem;
            text-align: center;
            color: #fff;
            transition: all .5s ease-in-out;
            text-shadow: 0px 0px 0px #fff;
        }

        #entrance {
            width: 100%;
            font-size: 8rem;
            text-align: center;
            line-height: 15rem;
            font-weight: bold;
            text-shadow: 5px 5px 20px #000;
            color: #fff;
            position: fixed;
            bottom: 0;
            left: 0;
        }

        #weclome.appear {
            text-shadow: 5px 5px 20px #000;
        }
        .front{
            display: flex;
            align-items: center;
            justify-content: center;
            flex-wrap: wrap;
            position: fixed;
            top: 22rem;
            left: 0;
        }
        .front li{
            width: 33.3%;
            height: 10rem;
            text-align: center;
        }
        .front svg{
            font-size: 7rem;
        }
        
    </style>
</head>

<body>
    <h1 id="weclome">你就是最棒的</h1>
    
        <ul class="front">
            <li><a href="./bilibili/code/bilibili1.html"><svg class="icon" aria-hidden="true"><use xlink:href="#icon-07"></use></svg></a></li>
            <li><a href="./bilibili/code/bilibili2.html"><svg class="icon" aria-hidden="true"><use xlink:href="#icon-33"></use></svg></a></li>
            <li><a href="./bilibili/code/bilibili3.html"><svg class="icon" aria-hidden="true"><use xlink:href="#icon-35"></use></svg></a></li>
            <li><svg class="icon" aria-hidden="true"><use xlink:href="#icon-29"></use></svg></li>
            <li><svg class="icon" aria-hidden="true"><use xlink:href="#icon-zanting"></use></svg></li>
            <li><svg class="icon" aria-hidden="true"><use xlink:href="#icon-38"></use></svg></li>
            <li><a href="./bilibili/code/bilibili4.html"><svg class="icon" aria-hidden="true"><use xlink:href="#icon-05"></use></svg></a></li>
            <li><a href="./bilibili/code/bilibili5.html"><svg class="icon" aria-hidden="true"><use xlink:href="#icon-04"></use></svg></a></li>
            <li><a href="./bilibili/code/bilibili6.html"><svg class="icon" aria-hidden="true"><use xlink:href="#icon-15"></use></svg></a></li>
        </ul>
  
    
    <div id="entrance">bilibili</div>

    <script>

        setInterval(function () {
            weclome.classList.toggle("appear");
        }, 1500);

        
    </script>
</body>

</html>